<template>
	<gracePage :customHeader="false">
		<!-- 页面主体 -->
		<view slot="gBody">
			<!-- 页面內容 -->
			<view style="margin-top: 2rpx; width:750rpx;height:100rpx;background:rgba(255,255,255,1);">
				<view class="grace-rows" style="position: relative;top: 30rpx;left: 60rpx;">
					<text style="font-size:28rpx;font-weight:400;color:rgba(51,51,51,1);">持卡人：</text>
					<view class="grace-columns">
						<input v-model="data.user_name" style="width:530rpx;text-align: center;" placeholder="请输入持卡人姓名" placeholder-style="font-size:24rpx;font-weight:400;color:rgba(153,153,153,1);" />
						<!-- <view style="width:530rpx;height:1rpx;background:rgba(153,153,153,1);"></view> -->
					</view>
				</view>
			</view>

			<view style="margin-top: 2rpx; width:750rpx;height:100rpx;background:rgba(255,255,255,1);">
				<view class="grace-rows" style="position: relative;top: 30rpx;left: 60rpx;">
					<text style="font-size:28rpx;font-weight:400;color:rgba(51,51,51,1);">卡号：</text>
					<view class="grace-columns" style="margin-left: 20rpx;">
						<input v-model="data.number" style="width:530rpx;text-align: center;" placeholder="请输入信用卡号" placeholder-style="font-size:24rpx;font-weight:400;color:rgba(153,153,153,1);" />
						<!-- <view style="width:530rpx;height:1rpx;background:rgba(153,153,153,1);"></view> -->
					</view>
				</view>
			</view>
			<view style="margin-top: 2rpx; width:750rpx;height:100rpx;background:rgba(255,255,255,1);">
				<view class="grace-rows" style="position: relative;top: 30rpx;left: 60rpx;">
					<text style="font-size:28rpx;font-weight:400;color:rgba(51,51,51,1);">额度：</text>
					<view class="grace-columns" style="margin-left: 20rpx;">
						<input v-model="data.quota" style="width:530rpx;text-align: center;" placeholder="请输入信用卡号" placeholder-style="font-size:24rpx;font-weight:400;color:rgba(153,153,153,1);" />
						<!-- <view style="width:530rpx;height:1rpx;background:rgba(153,153,153,1);"></view> -->
					</view>
				</view>
			</view>

			<view class="grace-rows grace-flex-vcenter" style="margin-top: 2rpx; width:750rpx;height:100rpx;background:rgba(255,255,255,1);">
				<text style="margin-left: 57rpx; font-size:30rpx;font-weight:400;color:rgba(51,51,51,1);">有效期：</text>
				<input type='number' :focus='M_jujiao' maxlength='2' v-model="data.validity_moth" @input="youxiaoqi_js_M"
				 placeholder="MM" placeholder-style="text-align: center;" style="text-align: center; margin-left: 95rpx;width: 100rpx;border-bottom: #000000 solid 2rpx;" />
				<text style="margin-left: 20rpx; font-size: 60rpx;">/</text>
				<input type='number' :focus='Y_jujiao' maxlength='2' v-model="data.validity_year" @input="youxiaoqi_js_Y"
				 placeholder="YY" placeholder-style="text-align: center;" style="text-align: center;margin-left: 20rpx;width: 100rpx;border-bottom: #000000 solid 2rpx;" />
			</view>

			<view style="margin-top: 2rpx; width:750rpx;height:100rpx;background:rgba(255,255,255,1);">
				<view class="grace-rows" style="position: relative;top: 30rpx;left: 60rpx;">
					<text style="font-size:28rpx;font-weight:400;color:rgba(51,51,51,1);">CVN2：</text>
					<view class="grace-columns">
						<input v-model="data.cvn" style="width:530rpx;text-align: center;" placeholder="请输入卡片背面后三位安全码" placeholder-style="font-size:24rpx;font-weight:400;color:rgba(153,153,153,1);" />
						<!-- <view style="width:530rpx;height:1rpx;background:rgba(153,153,153,1);"></view> -->
					</view>
				</view>
			</view>
			<view @tap="toggleTab('账单日')" class="grace-rows grace-flex-vcenter" style="width:750rpx;height:100rpx;background:rgba(255,255,255,1);">
				<text style="margin-left: 60rpx; font-size:30rpx;font-weight:400;color:rgba(51,51,51,1);">账单日：</text>
				<text style="text-align: center;width: 500rpx; font-size:26rpx;font-weight:400;color:rgba(153,153,153,1);line-height:60px;">{{ data.billing_day}}</text>
				<image src="../../static/jiantou.png" style=" width:13rpx;height:24rpx;"></image>
				<!-- <input type="number" v-model="bc_bill" @input="yanzheng" placeholder="请输入账单日" style="margin-left: 60rpx;width: 500rpx"/> -->
			</view>
			<view @tap="toggleTab('还款日')" class="grace-rows grace-flex-vcenter" style="margin: 3rpx 0; width:750rpx;height:100rpx;background:rgba(255,255,255,1);">
				<text style="margin-left: 60rpx; font-size:30rpx;font-weight:400;color:rgba(51,51,51,1);">还款日：</text>
				<text style="text-align: center;width: 500rpx; font-size:26rpx;font-weight:400;color:rgba(153,153,153,1);line-height:60px;">{{ data.repayment_date }}</text>
				<image src="../../static/jiantou.png" style="width:13rpx;height:24rpx;"></image>
				<!-- <input type="number" v-model="bc_repayment" @input="yanzheng" placeholder="请输入还款日" style="margin-left: 60rpx;width: 500rpx"/> -->
			</view>


			<view style="margin-top: 2rpx; width:750rpx;height:100rpx;background:rgba(255,255,255,1);">
				<view class="grace-rows" style="position: relative;top: 30rpx;left: 60rpx;">
					<text style="font-size:28rpx;font-weight:400;color:rgba(51,51,51,1);">预留手机：</text>
					<view class="grace-columns">
						<input v-model="data.phone" style="width:530rpx;text-align: center;" placeholder="请输入预留手机" placeholder-style="font-size:24rpx;font-weight:400;color:rgba(153,153,153,1);" />
						<!-- <view style="width:530rpx;height:1rpx;background:rgba(153,153,153,1);"></view> -->
					</view>
				</view>
			</view>
			<button @tap="submit" type="primary" :style="{background:button_color}" class="button_color" >确认</button>
			<w-picker mode="selector" defaultVal="每月01日" @confirm="onConfirm" ref="selector" themeColor="#f00" :selectList="selectList"></w-picker>


		</view>
	</gracePage>
</template>

<script>
	import gracePage from "../../graceUI/components/gracePage.vue";
	import wPicker from "@/components/w-picker/w-picker.vue";
	export default {
		data() {
			return {
				button_color:'',//按钮颜色
				id: '',
				data: {}, // 信用卡数据
				M_jujiao: false,
				Y_jujiao: false,
				dianji_tpye: '', //用来判断点击的是账单日还是还款日
				bc_repayment_name: '请选择还款日', //还款日名字
				bc_bill_name: '请选择账单日', //账单日名字
				selectList: [{
						label: "每月01日",
						value: 1
					}, {
						label: "每月02日",
						value: 2
					}, {
						label: "每月03日",
						value: 3
					}, {
						label: "每月04日",
						value: 4
					}, {
						label: "每月05日",
						value: 5
					}, {
						label: "每月06日",
						value: 6
					}, {
						label: "每月07日",
						value: 7
					}, {
						label: "每月8日",
						value: 8
					}, {
						label: "每月9日",
						value: 9
					}, {
						label: "每月10日",
						value: 10
					}, {
						label: "每月11日",
						value: 11
					},
					{
						label: "每月12日",
						value: 12
					}, {
						label: "每月13日",
						value: 13
					}, {
						label: "每月14日",
						value: 14
					}, {
						label: "每月15日",
						value: 15
					}, {
						label: "每月16日",
						value: 16
					}, {
						label: "每月17日",
						value: 17
					}, {
						label: "每月18日",
						value: 18
					}, {
						label: "每月19日",
						value: 19
					}, {
						label: "每月20日",
						value: 20
					}, {
						label: "每月21日",
						value: 21
					},
					{
						label: "每月22日",
						value: 22
					}, {
						label: "每月23日",
						value: 23
					}, {
						label: "每月24日",
						value: 24
					}, {
						label: "每月25日",
						value: 25
					}, {
						label: "每月26日",
						value: 26
					}, {
						label: "每月27日",
						value: 27
					}, {
						label: "每月28日",
						value: 28
					}, {
						label: "每月29日",
						value: 29
					}, {
						label: "每月30日",
						value: 30
					}, {
						label: "每月31日",
						value: 31
					}
				],
			}
		},
		onLoad: function(opt) {
			console.log(opt)
			this.id = opt.id;
			this.credit_card()
		},
		onShow() {
			this.button_color = uni.getStorageSync('button_color');
		},
		methods: {
			// 获取银行卡详情数据
			credit_card() {
				var vm = this
				vm.myPost(
					'api/cardapi/get_card_info', {
						id: this.id
					},
					function(res) {
						console.log(res);
						if (res.code == 200) {
							vm.data = res.data
						}

					}
				)
			},
			// 确认修改按钮
			submit() {
				if (this.id === '' || this.data.user_name === '' || this.data.number === '' || this.data.quota === '' || this.data.validity_moth ===
					'' || this.data.validity_year === '' || this.data.cvn === '' || this.data.billing_day === '' || this.data.repayment_date ===
					'') {
					uni.showToast({
						title: '请将信息填写完整',
						icon: 'none'
					})
				} else {
					var vm = this;
					var datas = {
						bank_name:vm.data.name,
						bank_num: vm.data.number,
						bank_phone: vm.data.phone,
						validity_year: vm.data.validity_year,
						validity_moth: vm.data.validity_moth,
						cvn: vm.data.cvn,
						billing_day: vm.data.billing_day,
						repayment_date: vm.data.repayment_date,
						quota: vm.data.quota,
						id: vm.id,
						z_img: vm.data.z_img
					}
					this.myPost(
						'api/cardapi/edit_credit_card', datas,
						function(res) {
							if(res.code == 200){
								uni.showToast({
									title: res.msg,
									icon: 'none'
								})
								setTimeout(function() {
									uni.navigateBack({
										delta: 1
									});
								}, 500);
							}else{
								uni.showToast({
									title: res.msg,
									icon: 'none'
								})
							}
							
						}
					)
				}
			},
			toggleTab(dianji_tpye) {
				this.dianji_tpye = dianji_tpye;
				this.$refs['selector'].show();
			},
			onConfirm(val) {
				var num = val.checkArr.value
				function pZone (num) {
				  return num < 10 ? '0' + num : num
				}
				if (this.dianji_tpye === '账单日') {
					this.bc_bill_name = val.checkArr.label;
					
					this.data.billing_day = pZone(num)
				} else if (this.dianji_tpye === '还款日') {
					this.bc_repayment_name = val.checkArr.label;
					this.data.repayment_date = pZone(num)
				}
				
			},
			youxiaoqi_js_M(val) {
				var vale = val.target.value;
				if (vale.length === 2) {
					this.M_jujiao = false;
					this.Y_jujiao = true;
				}
			},
			youxiaoqi_js_Y(val) {
				var vale = val.target.value;
				if (vale.length === 0 && this.Y_len === 1) {
					this.Y_jujiao = false;
					this.M_jujiao = true;
				}
				this.Y_len = vale.length;
			},

		},
		components: {
			gracePage,
			wPicker
		}
	}
</script>

<style>
	.button_color{
		margin-top: 200rpx; width:500rpx;height:90rpx;background:#3187D5;border-radius:6rpx;
	}
</style>
